<template>
    <view class="bg-white rounded-10 mt-2 p-2 mx-2 d-flex" >
        <view style="width: 226rpx;height: 226rpx;" class="rounded over-hidden">
            <image :src="props.goods.photo" class="w-100 h-100" mode="aspectFill" />

        </view>
        <view class="flex-1 ml-2">
            <view class="font-sm text-black over-hidden " style="height: 70rpx;">
                {{ props.goods.title }}

            </view>
            <view class="mt-2 d-flex">
                <view v-for="item in props.goods.tags" :key="item" class="font-sm text-grey pl-1">{{ item }}</view>
            </view>
            <view class="d-flex mt-1">
                <view class="font-md font-theme-color">
                    秒杀价{{ props.goods.seckill_price }}

                </view>
                <view class="ml-2 font-sm text-grey line-through flex-row items-center">
                    <view class="w-10 h-10 rounded-full d-flex j-center a-end h-100">
                        市场价 {{ props.goods.origin_price }}
                    </view>
                </view>
            </view>
            <view class="d-flex mt-1 j-sb">
                <text class="text-grey font-sm">
                    <template v-if="props.type === TabEnum.SECKILLING">
                        剩余10分钟结束
                    </template>
                    <template v-else>
                       15:00开始
                    </template>
                </text>
                <view class="bg-theme text-white px-2 py-1 rounded">
                    <template v-if="props.type === TabEnum.SECKILLING">
                        任性抢
                    </template>
                    <template v-else>
                        预约
                    </template>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>

defineOptions({
    name: 'SeckillCard',
})
import { TabEnum } from '@/pages/index/types'
const props=defineProps({
    goods: {
        type: Object,
        required: true,
    },
    type:{
        type: Number,
        validator(val) {
            return Object.values(TabEnum).includes(val)
        },
        default: TabEnum.SECKILLING,
    }
})


</script>

<style scoped lang="scss">
.seckill-card {
    border-radius: $uni-border-radius-lg;
}
</style>
